<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="点位类型" prop="pointType">
        <el-select v-model="queryParams.pointType" placeholder="请选择点位类型" @change="getRealData">
          <el-option label="  ——— 全部 ———  " value=""></el-option>
          <el-option
            v-for="dict in pointTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="getRealData">搜索</el-button>
      </el-form-item>-->
    </el-form>

    <div class="dashboard-editor-container">
      <!--latitude longitude-->
      <el-table v-loading="loading" :stripe="true" :data="realDataList" :max-height="tabHt">
        <el-table-column fixed label="监测站点" align="center" prop="pointName" width="250" />
        <el-table-column fixed label="归属项目" align="center" prop="proType" width="120" :formatter="proTypeFormat" />
        <el-table-column fixed label="联网" align="center" prop="network" width="120" >
          <template v-slot="scope">
            <span v-if="scope.row.network==='OnLine'" style="color: #13ce66;">在线</span>
            <span v-else-if="scope.row.network==='F'" style="color: #C90000;">故障</span>
            <span v-else style="color: #8c939d;">离线</span>
          </template>
        </el-table-column>
        <el-table-column fixed label="站点详细" align="center" prop="mapWz" width="120" >
          <template v-slot="scope">
            <img :src="require('@/assets/image/area.png')" @click="showPointWz(scope.row)" style="cursor: pointer;">
          </template>
        </el-table-column>
<!--        <el-table-column fixed label="责任人" align="center" prop="dutyUser" width="120" />-->
        <el-table-column fixed label="采样时间" align="center" prop="collecTimes" width="160">
        </el-table-column>
        <el-table-column fixed label="实时数据" align="left" prop="realDataStr" >
          <template v-slot="scope">
            <span v-for="(pointParam,inx) in scope.row[`pointParams`]" v-if="inx<12">
              <span> {{pointParam.paramInfo.name}}: </span>
              <span v-if="scope.row[`param${(pointParam.paramId)}`]" v-html="scope.row[`param${(pointParam.paramId)}`]"></span>
              <span v-else > / </span>
              <span v-if="pointParam.paramInfo.paramType === 'num'" style="margin-right: 10px;"> {{pointParam.paramInfo.unit}} </span>
              <span style="font-weight: bold;color: #4A7FB0;" v-if="inx!==11 && inx!==scope.row[`pointParams`].length-1"> | </span>
            </span>
            <span style="font-weight: bold;color: #4A7FB0;" v-if="scope.row[`pointParams`].length>12"> ...... </span>
          </template>
        </el-table-column>
        <!--
        <el-table-column min-width="100"
                         v-for="paramInfo in paramInfoList"
                         :key="paramInfo.id"
                         :label="paramInfo.name+'('+paramInfo.unit+')'"
                         :prop="`param${(paramInfo.id)}`"
                         align="center">
          <template v-slot="scope">
            <span v-html="scope.row[`param${(paramInfo.id)}`]"></span>
          </template>
        </el-table-column>
        -->
      </el-table>

    </div>

    <!-- 查看对话框 -->
    <el-dialog title="站点详细信息" :visible.sync="detailOpen" width="640px" append-to-body >
      <div>
        <detailConf :pointId="pointId"></detailConf>
      </div>
    </el-dialog>
    <!-- 监测站点位置对话框 -->
    <el-dialog title="监测站点位置" :visible.sync="wzOpen" width="740px" append-to-body >
      <div>
        <pointWz :longitude="longitude" :latitude="latitude"></pointWz>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryRealDatas } from "@/api/basic/hisMain";
  import pointWz from "./pointWz";
  import detailConf from "./detailConf";

  export default {
    name: 'RealGlance',
    components:{pointWz,detailConf},
    data() {
      return {
        proTypeOptions:[],
        timer: '',
        // 字典
        pointTypeOptions: [],
        // 遮罩层
        loading: false,
        // 参数配置表格数据
        paramInfoList: [],
        realDataList:[],
        longitude:null,
        latitude:null,
        wzOpen:false,
        detailOpen:false,
        pointId:null,
        queryParams:{
          pointType:''
        },
      }
    },
    computed: {
      tabHt(){
        return this.$store.state.app.tableHeight.ht
      }
    },
    created() {
      this.getDicts("basic_pro_type").then(response => {
        this.proTypeOptions = response.data;
      });
      this.getDicts("basic_point_type").then(response => {
        this.pointTypeOptions = response.data;
      });
      this.getRealData();
    },
    methods: {
      proTypeFormat(row) {
        return this.selectDictLabel(this.proTypeOptions, row.proType);
      },
      showPointWz(row){
        // this.longitude = row.longitude;
        // this.latitude = row.latitude;
        // this.wzOpen = true;
        this.pointId = row.pointId;
        this.detailOpen = true;
      },
      getRealData(){
        this.loading = true;
        queryRealDatas(this.queryParams).then(response => {
          this.realDataList = response.data;
          this.loading = false;
        });
      },
    },
    mounted() {
      this.timer = setInterval(this.getRealData, 60*1000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  }
</script>

